<template>
  <div class="data_summary">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="数据汇总" name="summary">
        <div class="select" style="display: inline-flex;">
          <el-form :inline="true" :model="form" class="demo-form-inline">

            <el-form-item label="年月">
              <el-date-picker size="small"
                  v-model="form.salaryYearMonth"
                  @change="getDataList"
                  type="month"
                  placeholder="选择月"
                              :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="getDataList">筛选</el-button>
              <el-button type="primary" size="small" @click="dialogFormVisible=true">重新计算数据</el-button>
            </el-form-item>

          </el-form>
        </div>
        <el-table
            :data="tableData.filter(data=>data.channel.includes('自招'))"
            stripe
            border
            :show-summary="true"
            @selection-change="handleSelectionChange"
            default-expand-all
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
          <el-table-column>
            <template slot="header">四川瀚海{{ form.salaryYearMonth|formatDateMonth }}工资统计表（财务表）</template>
            <el-table-column label="应聘渠道" prop="channel">
            </el-table-column>
            <el-table-column label="部门" prop="dept" sortable min-width="120">
            </el-table-column>
            <el-table-column label="人数" prop="peopleNum">
            </el-table-column>
            <el-table-column label="应付项">
              <el-table-column label="应付总额" prop="shouldPayAll">
              </el-table-column>
              <el-table-column label="责任制应付" prop="shouldPayResponsibility">
              </el-table-column>
              <el-table-column label="计时制应付" prop="shouldPayResponsibility">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扣款项">
              <el-table-column label="个人社保" prop="socialSecurity">
              </el-table-column>
              <el-table-column label="个税" prop="incomeTax">
              </el-table-column>
              <el-table-column label="水电气" prop="waterElectricity">
              </el-table-column>
              <el-table-column label="其他" prop="otherDeductions">
              </el-table-column>
            </el-table-column>
            <el-table-column label="前期已发">
              <el-table-column label="子女补助" prop="childAllowance">
              </el-table-column>
            </el-table-column>
            <el-table-column label="本次实发项">
              <el-table-column label="实发总额" prop="actualPayAll">
              </el-table-column>
              <el-table-column label="责任制" prop="actualPayResponsibility">
              </el-table-column>
              <el-table-column label="计时制" prop="actualPayTiming">
              </el-table-column>
            </el-table-column>
          </el-table-column>

        </el-table>
        <el-table
            :data="tableData.filter(data=>!data.channel.includes('自招'))"
            stripe
            :show-header="false"
            border
            :show-summary="true"
            @selection-change="handleSelectionChange"
            default-expand-all
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
          <el-table-column>
            <template slot="header">四川瀚海{{ form.salaryYearMonth|formatDateMonth }}工资统计表（财务表）</template>
            <el-table-column label="应聘渠道" prop="channel">
            </el-table-column>
            <el-table-column label="部门" prop="dept" sortable min-width="120">
            </el-table-column>
            <el-table-column label="人数" prop="peopleNum">
            </el-table-column>
            <el-table-column label="应付项">
              <el-table-column label="应付总额" prop="shouldPayAll">
                <template slot-scope="scope">
                  {{scope.row.shouldPayAll.toLocaleString()}}
                </template>
              </el-table-column>
              <el-table-column label="责任制应付" prop="shouldPayResponsibility">
              </el-table-column>
              <el-table-column label="计时制应付" prop="shouldPayResponsibility">
              </el-table-column>
            </el-table-column>
            <el-table-column label="扣款项">
              <el-table-column label="个人社保" prop="socialSecurity">
              </el-table-column>
              <el-table-column label="个税" prop="incomeTax">
              </el-table-column>
              <el-table-column label="水电气" prop="waterElectricity">
              </el-table-column>
              <el-table-column label="其他" prop="otherDeductions">
              </el-table-column>
            </el-table-column>
            <el-table-column label="前期已发">
              <el-table-column label="子女补助" prop="childAllowance">
              </el-table-column>
            </el-table-column>
            <el-table-column label="本次实发项">
              <el-table-column label="实发总额" prop="actualPayAll">
              </el-table-column>
              <el-table-column label="责任制" prop="actualPayResponsibility">
              </el-table-column>
              <el-table-column label="计时制" prop="actualPayTiming">
              </el-table-column>
            </el-table-column>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="数据详情" name="detail">
        <div class="select" style="display: inline-flex;">
          <el-form :inline="true" :model="form" class="demo-form-inline">

            <el-form-item label="年月">
              <el-date-picker  size="small"
                  v-model="form.salaryYearMonth"
                  @change="getDataList"
                  type="month"
                  placeholder="选择月">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="getDataList">筛选</el-button>
              <el-button type="primary" size="small" @click="dialogFormVisible=true">重新计算数据</el-button>
            </el-form-item>

          </el-form>
        </div>
        <el-table
            :data="tableData1"
            stripe
            border
            id="table-detail"
            @selection-change="handleSelectionChange"
            default-expand-all
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
          <el-table-column>
            <template slot="header">四川瀚海{{ form.salaryYearMonth|formatDateMonth }}工资明细表（财务表）</template>
            <el-table-column label="工资时间" prop="salaryYearMonth" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.salaryYearMonth|formatDateMonth }}
              </template>
            </el-table-column>
            <el-table-column label="工号" prop="jobNo" fixed="left"></el-table-column>
            <el-table-column label="姓名" prop="username" fixed="left"></el-table-column>
            <el-table-column label="证件号码" prop="cid" :show-overflow-tooltip="true" width="100px"></el-table-column>
            <el-table-column label="部门" prop="dept" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="职位" prop="position" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="薪资属性" prop="salaryType" width="100px"></el-table-column>
            <el-table-column label="人力性质" prop="resourcesType" width="100px"></el-table-column>
            <el-table-column label="夜班天数" prop="nightShiftDays" width="100px"></el-table-column>
            <el-table-column label="夜班补贴" prop="nightShiftAllowance" width="100px"></el-table-column>
            <el-table-column label="误餐补贴" prop="mealAllowance" width="100px"></el-table-column>
            <el-table-column label="绩效奖" prop="achievementBonus" width="100px"></el-table-column>
            <el-table-column label="标准工资" prop="standardWage" width="100px"></el-table-column>
            <el-table-column label="应出勤" prop="planJobDays" width="100px"></el-table-column>
            <el-table-column label="实际出勤" prop="actualJobDays" width="100px"></el-table-column>
            <el-table-column label="基本工资核算出勤" prop="basicWageCalculateDays" :min-width="160"></el-table-column>
            <el-table-column label="周末出勤天数" prop="weekendJobDays" :min-width="120"></el-table-column>
            <el-table-column label="基本出勤工资" prop="basicAttendanceWage" :min-width="120"></el-table-column>
            <el-table-column label="平时加班小时" prop="normalOvertimeHours" :min-width="120"></el-table-column>
            <el-table-column label="平时加班工资" prop="normalOvertimeWage" :min-width="120"></el-table-column>
            <el-table-column label="周末加班小时" prop="weekendOvertimeHours" :min-width="120"></el-table-column>
            <el-table-column label="周末加班工资" prop="weekendOvertimeWage" :min-width="120"></el-table-column>
            <el-table-column label="法定加班小时" prop="legalOvertimeHours" :min-width="120"></el-table-column>
            <el-table-column label="法定加班工资" prop="legalOvertimeWage" :min-width="120"></el-table-column>
            <el-table-column label="病假天数" prop="sickLeaveDays" width="100px"></el-table-column>
            <el-table-column label="病假工资合计" prop="totalSickPay" :min-width="120"></el-table-column>
            <el-table-column label="工龄奖" prop="seniorityAward"></el-table-column>
            <el-table-column label="孝工奖" prop="filialPietyAward"></el-table-column>
            <el-table-column label="效益奖金" prop="benefitBonus" width="100px"></el-table-column>
            <el-table-column label="岗位补贴" prop="postSubsidy" width="100px"></el-table-column>
            <el-table-column label="介绍奖" prop="introductionAward"></el-table-column>
            <el-table-column label="亲属补贴" prop="familyAllowance" width="100px"></el-table-column>
            <el-table-column label="子女补贴" prop="childAllowance" width="100px"></el-table-column>
            <el-table-column label="高温补贴" prop="highTemperatureAllowance" width="100px"></el-table-column>
            <el-table-column label="全勤奖" prop="fullAttendanceBonus"></el-table-column>

            <el-table-column label="固定工资合计" prop="totalFixedSalary" :min-width="120"></el-table-column>
            <el-table-column label="员工大会" prop="staffMeeting" width="100px"></el-table-column>
            <el-table-column label="项目奖金" prop="projectBonus" width="100px"></el-table-column>
            <el-table-column label="补前期工资差异" prop="beforeWages" :min-width="150"></el-table-column>
            <el-table-column label="其他奖励" prop="otherRewards" width="100px"></el-table-column>
            <el-table-column label="其他工资合计" prop="totalOtherWages" :min-width="120"></el-table-column>
            <el-table-column label="绩效考核" prop="kpi" width="100px"></el-table-column>
            <el-table-column label="水电气" prop="waterAndElectricity"></el-table-column>
            <el-table-column label="其他扣款" prop="otherDeductions" width="100px"></el-table-column>
            <el-table-column label="扣款小计" prop="subtotalDeduction" width="100px"></el-table-column>
            <el-table-column label="应发工资" prop="wagesPayable" width="100px"></el-table-column>
            <el-table-column label="个人养老" prop="individualPension" width="100px"></el-table-column>
            <el-table-column label="个人医疗" prop="personalMedicalTreatment" width="100px"></el-table-column>
            <el-table-column label="个人失业" prop="individualUnemployment" width="100px"></el-table-column>
            <el-table-column label="社保合计" prop="totalSocialSecurity" width="100px"></el-table-column>
            <el-table-column label="应纳税所得额" prop="taxableIncome" :min-width="120"></el-table-column>
            <el-table-column label="个税" prop="personalIncomeTax"></el-table-column>
            <el-table-column label="前期已发工资" prop="beforeSalaryPay" :min-width="120"></el-table-column>
            <el-table-column label="本期实发工资" prop="actualSalaryPay" :min-width="120"></el-table-column>
            <el-table-column label="计算时间" prop="createTime" :min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.createTime|formatDate }}
              </template>
            </el-table-column>
            s
            <el-table-column label="在职补贴" prop="timeOnJobSubsidy" width="100px">
            </el-table-column>
            <el-table-column label="招聘渠道" prop="recruitmentChannels" width="100px"></el-table-column>
          </el-table-column>

        </el-table>
        <div class="block">
          <el-pagination
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[size, size*2, size*3, size*4 ,total]"
              :page-size=size
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>

    <el-dialog :title="activeName==='summary'?'汇总数据计算':'详细数据计算'" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-row>
          <el-col :span="24">
            <el-date-picker style="width: 100%!important;"
                            v-model="form.salaryYearMonth"
                            type="month"
                            placeholder="选择月">
            </el-date-picker>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getDataSummary">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
import moment from "moment/moment";

export default {
  name: "DataSummary",
  components: {ToolBar},
  data() {
    return {
      activeName: 'summary',
      form: {
        salaryYearMonth:moment(moment().subtract(1,"months").startOf('month')).format("YYYY-MM-DD")
      },
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      tableData1: [],
      dialogFormVisible: false
    };
  },
  created() {
    this.getDataList()
  },
  methods: {

    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.activeName)
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(row) {
      console.log(row);
      this.form = row
      this.setDialogVisible(false)
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$tools.showMessageBox("确认删除" + row.paramName + "(" + row.paramValue + ")？", "操作确认", 'warning').then(confirm => {
        axios.delete("/fin_family_allowance/delete/" + row.id).then(res => {
          if (res.data.success) {
            this.$tools.showMessage("参数" + row.paramName + "(" + row.paramValue + ")删除成功！", "success")
            this.getDataList()
          }
        })

      }).catch(cancel => {
        this.$tools.showMessage("操作已取消！", "info")

      })
    },
    getDataList() {
      this.dialogFormVisible = false
      console.log("查询数据：", this.form)
      switch (this.activeName) {
        case "summary":
          axios.post("/fin_wages_summary/list", this.form).then(res => {
            console.log("打卡信息：", res)
            if (res.data.success) {
              this.tableData = res.data.data

            } else {
              this.tableData = []
              this.total = 0
              this.pages = 1

            }
          })
          break;
        case "detail":
          axios.post("/fin_wages_detail/list/" + this.currentPage + "/" + this.size, this.form).then(res => {
            console.log("详细：", res)
            if (res.data.success) {
              this.tableData1 = res.data.data.records
              this.total = res.data.data.total
              this.pages = res.data.data.pages

            } else {
              this.tableData1 = []
              this.total = 0
              this.pages = 1

            }

          })
          break;
      }

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    getDataSummary() {
      switch (this.activeName) {
        case "summary":
          console.log("计算汇总")
          axios.post("/fin_wages_summary/get", this.form).then(res => {
            if (res.data.success) {
              this.getDataList();
            }
          })
          break;
        case "detail":
          console.log("计算详细")
          axios.post("/fin_wages_detail/get", this.form).then(res => {
            if (res.data.success) {
              this.getDataList();
            }
          })
          break;
      }
    }
  },
}
</script>

<style scoped>

</style>
